<template>
	<view class="index">
		<view class="itemBox" v-for="(item,key) in attrs" :key="key" v-if="item.show">
			<view class="label">
				{{item.label}}
			</view>
			<view class="inputBox downArrow" v-if="item.mode==='selector'" :class="{active:values[item.name]}">
				<picker @change="bindPickerChange($event,item)" :value="0" range-key="value" :mode="item.mode"
					:range="item.list">
					{{values[item.name]?values[item.name]:item.placeholder}}
				</picker>
				<view v-if="item.showWarning" class="warning">{{item.warning}}</view>
			</view>
			<view class="inputBox" v-if="item.mode==='input'" :class="{active:values[item.name]}">
				<input type="number" placeholder="0" v-model="item.value" />
				<view v-if="item.showWarning" class="warning">{{item.warning}}</view>
			</view>
			<view class="inputBox" v-if="item.mode==='range'" :class="{active:values[item.name]}">
				<view class="rangeBox">
					<input type="number" :placeholder="item.limit[0]" v-model="item.start" />~<input type="number"
						placeholder="0" v-model="item.end" :placeholder="item.limit[1]" />
				</view>
				<view v-if="item.showWarning" class="warning">{{item.warning}}</view>
			</view>
		</view>

		<view class="itemBox">
			<view class="label">障碍物设置</view>
			<view class="inputBox downArrow active">
				<picker @change="bindObstaclePickerChange" :value="obstacle" range-key="value" mode="selector"
					:range="obstacleOptions">
					{{obstacle?'开':'关'}}
				</picker>
			</view>
		</view>
		<view class="itemBox" v-if="obstacle">
			<view class="label">
				障碍物高度（m）：
			</view>
			<view class="inputBox" :class="{active:obstacleData.height}">
				<input type="number" placeholder="0" v-model="obstacleData.height" />
			</view>
		</view>
		<view class="itemBox" v-if="obstacle">
			<view class="label">
				障碍物距离（m）：
			</view>
			<view class="inputBox" :class="{active:obstacleData.height}">
				<input type="number" placeholder="0" v-model="obstacleData.distance" />
			</view>
		</view>
		<view class="itemBox" v-if="obstacle">
			<view class="label">
				回转中心距离（m）：
			</view>
			<view class="inputBox" :class="{active:obstacleData.centerDistance}">
				<input type="number" placeholder="0" v-model="obstacleData.centerDistance" />
			</view>
		</view>
		<view class="button" @click="search">查询吊车</view>
	</view>
</template>

<script>
	import {
		combinationList,
		raduisList,
		weightList,
		momentPercentageList,
		mainArmLengthList,
		jibLengthList,
		mineTowerLengthList
	} from './data.js';
	import {
		goPage,
		
	} from '@/utils/crane';
	import { member} from "../../../api/crane.js"
	const typeMap = ['main', 'mainTower', 'mainJib'];
	export default {
		data() {
			return {
				us:2,
				huiyuan:1,
				obstacle: 0,
				obstacleData: {
					distance: undefined,
					height: undefined,
					centerDistance: undefined
				},
				obstacleOptions: [{
					id: 0,
					value: '关'
				}, {
					id: 1,
					value: '开'
				}, ],
				values: {
					combination: null,
					raduis: null,
					weight: null
				},
				attrs: [{
					name: 'combination',
					label: '臂长组合模式：',
					warning: '请输入臂长组合模式',
					showWarning: false,
					placeholder: '请选择',
					list: combinationList,
					mode: 'selector',
					value: '',
					show: true
				}, {
					name: 'raduis',
					label: '作业半径（m）：',
					warning: '请输入臂长组合模式',
					showWarning: false,
					placeholder: '请选择',
					list: raduisList,
					mode: 'input',
					value: '',
					show: true
				}, {
					name: 'weight',
					label: '起重量（T/吨）：',
					warning: '请输入起重量',
					showWarning: false,
					placeholder: '请选择',
					list: weightList,
					mode: 'input',
					value: '',
					show: true
				}, {
					name: 'momentPercentage',
					label: '力矩百分比范围（%）：',
					warning: '请输入力矩百分比范围：95~105',
					showWarning: true,
					placeholder: '请选择',
					list: momentPercentageList,
					mode: 'range',
					value: ['', ''],
					start: 95,
					end: 105,
					limit: [95, 105],
					show: true
				}, {
					name: 'mainArmLength',
					label: '主臂长度范围（m）：',
					warning: '请输入主臂长度范围：10~20',
					showWarning: true,
					placeholder: '请选择',
					list: mainArmLengthList,
					mode: 'range',
					value: ['', ''],
					start: 10,
					end: 20,
					limit: [10, 20],
					show: true
				}, {
					name: 'jibLength',
					label: '副臂长度范围（m）：',
					warning: '请输入副臂长度范围：10~20',
					showWarning: true,
					placeholder: '请选择',
					list: jibLengthList,
					mode: 'range',
					value: ['', ''],
					start: 10,
					end: 20,
					limit: [10, 20],
					show: false
				}, {
					name: 'mineTower',
					label: '矿塔长度范围（m）：',
					warning: '请输入矿塔长度范围：10~20',
					showWarning: true,
					placeholder: '请选择',
					list: mineTowerLengthList,
					mode: 'range',
					value: ['', ''],
					start: 10,
					end: 20,
					limit: [10, 20],
					show: false
				}]
			}
		},
		computed: {
			momentPercentage: function(val, preVal) {
				if ((this.attrs[3].start && this.attrs[3].end) && (this.attrs[3].start < this.attrs[3].limit[0] ||
						this.attrs[3].end > this.attrs[3].limit[1] ||
						this.attrs[3].start > this.attrs[3].end)) {}
				return this.attrs[3].start + '~' + this.attrs[3].end;
			},
			mainArmLength: function(val, preVal) {
				return this.attrs[4].start + '~' + this.attrs[4].end;
			},
			jibLength: function(val, preVal) {
				return this.attrs[5].start + '~' + this.attrs[5].end;
			},
			mineTower: function(val, preVal) {
				return this.attrs[6].start + '~' + this.attrs[6].end;
			},
		},
		methods: {
			bindObstaclePickerChange: function(e) {
				console.log('bindObstaclePickerChange---', e);
				this.obstacle = Number(e.detail.value);
			},
			bindPickerChange: function(e, data) {
				const val = e.target.value;
				if (data.name === 'combination') {
					if (Number(val) === 0) {
						this.attrs[5].show = false;
						this.attrs[6].show = false;
					} else if (Number(val) === 1) {
						this.attrs[5].show = false;
						this.attrs[6].show = true;
					} else if (Number(val) === 2) {
						this.attrs[5].show = true;
						this.attrs[6].show = false;
					}
				}
				data.value = val;
				if (Array.isArray(e.target.value)) {
					this.values[data.name] = data.list[0][val[0]].value + ' ~ ' + data.list[1][val[1]].value;
				} else {
					this.values[data.name] = data.list[val].value;
				}
				const name = data.name;
				const mode = data.mode;
				this.attrs = [...this.attrs];
			},
			search: function() {
				console.log(12244234234234234234234234)
				this.values.raduis = this.attrs[1].value;
				this.values.weight = this.attrs[2].value;
				console.log(12244234234234234234234234)
				for (let i = 0; i < this.attrs.length; i++) {
					if (this.attrs[i].mode === 'range') {
						if ((this.attrs[i].start && this.attrs[i].end) && (Number(this.attrs[i].start) < this.attrs[i]
								.limit[0] ||
								Number(this.attrs[i].end) > this.attrs[i].limit[1] ||
								Number(this.attrs[i].start) > Number(this.attrs[i].end))) {
							return uni.showToast({
								title: this.attrs[i].warning,
								icon: 'none'
							})
						}
					}
				}
				
				if (!(this.values.combination &&
						this.values.raduis &&
						this.values.weight &&
						this.momentPercentage &&
						this.attrs[3].start &&
						this.attrs[3].end &&
						this.mainArmLength &&
						this.attrs[4].start &&
						this.attrs[4].end)) {
					return uni.showToast({
						title: '请输入参数',
						icon: 'none'
					})
				}
				
				if (Number(this.attrs[0].value) === 1) {
					if (!this.mineTower && !this.attrs[6].start && !this.attrs[6].end) {
						return uni.showToast({
							title: '请输入参数',
							icon: 'none'
						})
					}
				} else if (Number(this.attrs[0].value) === 2) {
					if (!this.jibLength && !this.attrs[5].start && !this.attrs[5].end) {
						return uni.showToast({
							title: '请输入参数',
							icon: 'none'
						})
					}
				}
				
				if (this.obstacle) {
					if (!this.obstacleData.height) {
						return uni.showToast({
							title: '请输入障碍物高度',
							icon: 'none'
						})
					}
					if (!this.obstacleData.distance) {
						return uni.showToast({
							title: '请输入障碍物距离',
							icon: 'none'
						})
					}
					if (!this.obstacleData.centerDistance) {
						return uni.showToast({
							title: '请输入回转中心距离',
							icon: 'none'
						})
					}
				} else {
					this.obstacleData.height = 0;
					this.obstacleData.distance = 0;
				}
				
				
				
				member(this.$store.state.app.uid).then(res => {
					console.log(res)
					// this.isNewUser=res.data.isNewUser
					// this.us=res.data.vipDay
					if(res.data.isNewUser==0){
						
						console.log(res.data.vipDay)
						if(res.data.vipDay==0){
							uni.showModal({
								title:"提示",
								content:"您的会员已到期，请点击确定按钮，前往充值会员",
								success:function(res) {
									if(res.confirm){
										console.log("确定")
										uni.navigateTo({
											url:"/pages/users/user_vip/index"
										})
									}else if(res.cancel){
										console.log("取消")
									}
								}
							})
						}
						if(res.data.vipDay>=1){
							var that=this
							const url = '/pages/searchCarList/index';
							
							
							goPage({
								url,
								query: {
									momentPercentage: that.momentPercentage,
									mainArmLength: that.mainArmLength,
									jibLength: that.jibLength,
									mineTower: that.mineTower,
									obstacleData: that.obstacleData,
									obstacle: Boolean(that.obstacle),
									obstacleDistance: that.obstacleData.distance,
									obstacleHeight: that.obstacleData.height,
									centerDistance: that.obstacleData.centerDistance,
									...that.values
								}
							});
						}
					}
					
					
					if(res.data.isNewUser==1){
						var that=this
						uni.showModal({
							title:"提示",
							content:"您是当前系统新用户，可以免费享受3天VIP会员特权",
							success:function(res) {
								if(res.confirm){
									const url = '/pages/searchCarList/index';
									
									
									goPage({
										url,
										query: {
											momentPercentage: that.momentPercentage,
											mainArmLength: that.mainArmLength,
											jibLength: that.jibLength,
											mineTower: that.mineTower,
											obstacleData: that.obstacleData,
											obstacle: Boolean(that.obstacle),
											obstacleDistance: that.obstacleData.distance,
											obstacleHeight: that.obstacleData.height,
											centerDistance: that.obstacleData.centerDistance,
											...that.values
										}
									});
								}else if(res.cancel){
									console.log("取消")
								}
							}
						})
					}
				})
				
			
				
			},
			handleObstacle: function() {
				this.obstacle = !this.obstacle;
				this.obstacleData = {
					distance: undefined,
					height: undefined,
					centerDistance: undefined,
				}
			},
		}
	}
</script>
<style lang="scss">
	.index {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60upx 20upx;

		.itemBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-bottom: 50upx;
			line-height: 66upx;
			font-size: 30upx;
			color: #CCCCCC;

			.label {
				line-height: 40upx;
				font-size: 28upx;
				color: #212121;
			}

			.inputBox {
				width: 320upx;
				height: 72upx;
				border: 1px solid #999999;
				border-radius: 8upx;
				line-height: 70upx;
				font-size: 28upx;
				padding: 0 16upx;
				position: relative;

				input {
					display: block;
					height: 100%;
					color: #212121;
					text-align: center;
				}

				&.active {
					color: #212121;
				}

				&.downArrow {
					text-align: center;
				}

				&.downArrow::after {
					position: absolute;
					width: 44upx;
					height: 44upx;
					right: 0;
					top: 50%;
					margin-top: -22upx;
					background: url(./images/downArrow.png) 0 0 /100% 100%;
					content: '';
				}

				.warning {
					position: absolute;
					bottom: -38upx;
					left: 0;
					line-height: 30upx;
					font-family: 'PingFangSC-Regular';
					font-size: 22upx;
					color: #999999;
					letter-spacing: 0;
					text-align: left;
					font-weight: 400;
				}

				.rangeBox {
					display: flex;
					justify-content: space-between;
					height: 100%;
					color: #333333;

					input {
						flex: 0 0 80upx;
						height: 100%;
						text-align: center;
					}
				}
			}
		}

		.button {
			width: 480upx;
			height: 85upx;
			margin-top: 40upx;
			margin-bottom: 40upx;
			line-height: 85upx;
			font-size: 30upx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 8upx;
			background-color: #0081FF;
		}

		.obstacle-container {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 60upx;
			margin-bottom: 37upx;

			.checkbox-group {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 16upx;
				flex: 1 0 auto;

				.checkbox {
					width: 32upx;
					height: 32upx;
					margin-right: 16upx;
					border-radius: 4upx;
					border: 1upx solid #33ADFF;

					&.active {
						background: url(./images/checked.png) 0 0/100% 100% no-repeat;
						border: none;
					}
				}

				.text {
					height: 32upx;
					line-height: 32upx;
					font-size: 28upx;
					color: #212121;
				}
			}

			.input-box {
				display: flex;
				align-items: center;
				height: 100%;
				line-height: 32upx;
				font-size: 22upx;
				color: #555;

				input {
					height: 50upx;
					width: 107upx;
					font-size: 24upx;
					margin-left: 15upx;
					border-radius: 8upx;
					border: 1px solid #212121;
					text-align: center;
				}

				&+.input-box {
					margin-left: 36upx;
				}
			}
		}

	}
</style>
